<template>
  <div class="root">
    <m-header title="我的评价">
      <div slot="left" v-on:click="$router.go(-1)"><img class="m-icon-img margin-right-10" src="../assets/images/menu_back.png" /></div>
      <div slot="right"><img class="m-icon-img margin-right-10" src="../assets/images/menu_more.png" /></div>
    </m-header>

    <div class="content" id="content">
      <div class="evaluate-list">

        <div class="evaluate-list-item" v-for="(item,index) in evaluateList">
          <div class="evaluate-list-item-left">
            <div class="evaluate-list-item-left-avatar">
              <img class="avatar" :src="item.avatarUrl ? item.avatarUrl : defaultAvatar" @click="link2InfoPage(item.accountId)" />
            </div>
            <div class="evaluate-list-item-left-title">
              <p class="name">{{item.nickname}} <span class="date">{{dateFormat(item.createTime)}}</span></p>
              <p class="evaluate">
                {{item.content}}
              </p>
            </div>
          </div>
          <div class="evaluate-list-item-right" @click="deleteEvaluate(index)">
            <img class="delete-icon" src="../assets/images/delete_icon.png" alt="">
          </div>
        </div>

      </div>
      <mu-infinite-scroll :scroller="scroller" loadingText="正在加载..." :loading="loading" @load="getMyEvaluates(true)" />
      <m-none-data content='还没有人对你做出评价哦' v-if="evaluateList.length === 0" />
    </div>
  </div>
</template>

<script>
  import mHeader from '../components/header'
  import mNoneData from '../components/none-data.vue'
  import defaultAvatar from '../assets/images/default_avatar.png'
  import util from '../util/util.js'

  export default {
    components: {
      mHeader,
      mNoneData
    },
    data() {
      return {
        defaultAvatar,
        evaluateList: [],
        num: 0,
        pageNo: 1,
        loading: false,
        hasMore: true,
        scroller: null
      }
    },
    methods: {
      getMyEvaluates(isLoadMore) {

        if (isLoadMore) {
          console.log('LoadMore');
          if (!this.hasMore) return;
          this.pageNo++;
          this.loading = true;
        }

        var _this = this;
        this.$http.get('my/evaluates', {
          params: {
            page: _this.pageNo
          }
        }).then(
          function (response) {
            if (response.data.code === '0') {

              _this.evaluateList = _this.evaluateList.concat(response.data.data.evaluateList);
              _this.num += response.data.data.evaluateList.length;

              if (response.data.data.evaluateList.length < 10) {
                _this.hasMore = false;
              }
              if (isLoadMore) {
                _this.loading = false;
              }

            }
            console.log(_this.evaluateList);

            // if (_this.evaluateList.length === 0) {
            //   for (var i = 1; i < 4; i++) {
            //     _this.evaluateList.push({
            //       nickname: '张美丽' + i,
            //       content: '美丽贤惠，温柔大方' + i,
            //       accountId: -1,
            //       createTime: new Date().getTime() - 60000000 * i,
            //       avatarUrl: ''
            //     });
            //   }
            // }
          }
        );
      },

      dateFormat(timeMill) {
        // 比如需要这样的格式 yyyy-MM-dd hh:mm:ss
        var date = new Date(timeMill);
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var D = date.getDate() + ' ';
        var h = date.getHours() + ':';
        var m = date.getMinutes();
        // var s = date.getSeconds();
        var dateStr = M + D + h + m; //呀麻碟
        // 输出结果：2014-04-23 18:55:49
        return dateStr;
      },

      deleteEvaluate(index) {
        console.log('click delete ' + index);
        // /api/evaluate/{id}
        var _this = this;
        var id = this.evaluateList[index].id;

        // _this.evaluateList.splice(index, 1);

        this.$http.delete('evaluate/' + id).then(
          function (response) {
            if (response.data.code === '0') {
              _this.evaluateList.splice(index, 1);
              util.toast('操作成功');
            }
          }
        );
      },

      link2InfoPage(_accountId) {
        this.$router.push({
          name: 'UserInformation',
          params: {
            accountId: _accountId
          }
        });
      },
    },
    mounted() {
      this.scroller = document.getElementById('content');
      this.getMyEvaluates(false);
    }
  }

</script>

<style lang="less" scoped>

  /*@import "../assets/less/common.less";*/
  
  .evaluate-list {
    background-color: white;
    &-item {
      display: flex;
      justify-content: space-between;
      /*align-items: center;*/
      flex-direction: row;
      padding: 12px 24px;
      border-bottom: 1px solid #E6E6E6;
      &-left {
        display: flex;
        /*align-items: center;*/
        flex-direction: row;
        flex: 1;
        .avatar {
          width: 56px;
          height: 56px;
          border-radius: 50%;
        }
        &-title {
          flex: 1;
          margin-left: 16px;
          .name {
            font-size: 16px;
            color: #333333;
          }
          .date {
            margin-left: 4px;
            font-size: 14px;
            color: #888888;
          }
          .evaluate {
            margin-top: 4px;
            font-size: 16px;
          }
        }
      }
      &-right {
        .delete-icon {
          width: 20px;
          height: 20px;
        }
      }
    }
  }

</style>
